<template>
  <div class="order-search">
    <el-select
      v-model="searchdata.league_id"
      placeholder="联赛"
      @change="changeSearch"
      style="width: 128px; height: 28px"
    >
      <el-option v-if="orderoptions.league_option.options.length == 0" label="全部联赛" value="all" />
      <el-option
        v-for="(item, index) in orderoptions.league_option.options"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-select
      v-model="searchdata.member"
      placeholder="用户"
      @change="changeSearch"
      style="width: 128px; height: 28px; margin-left: 16px"
    >
      <el-option v-if="orderoptions.member_option.options == 0" label="全部用户" value="all" />
      <el-option
        v-for="(item, index) in orderoptions.member_option.options"
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-dropdown
      trigger="click"
      style="width: 128px; height: 28px; margin-left: 16px; border: solid 1px #eee; cursor: pointer"
      popper-class="refreshtime_dropdown"
      @command="clickrefreshtime"
    >
      <div class="el-dropdown-link">
        <div class="dropdown-text">
          <img style="width: 16px; height: 16px" src="@/assets/kandan/shuaxin.png" alt="" />
          <div style="margin-left: 4px">刷新</div>
        </div>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :command="-1" :class="refreshTime.time == -1 ? 'activedropdown' : ''"
            >手动</el-dropdown-item
          >
          <el-dropdown-item :command="5" :class="refreshTime.time == 5 ? 'activedropdown' : ''"
            >每 5 秒</el-dropdown-item
          >
          <el-dropdown-item :command="10" :class="refreshTime.time == 10 ? 'activedropdown' : ''"
            >每 10 秒</el-dropdown-item
          >
          <el-dropdown-item :command="20" :class="refreshTime.time == 20 ? 'activedropdown' : ''"
            >每 20 秒</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
const props = defineProps({
  searchdata: Object,
  refreshTime: Object,
  orderoptions: Object,
})
const emits = defineEmits()

const changeSearch = () => {
  emits('changeSearch')
}

const clickrefreshtime = command => {
  props.refreshTime.time = command
  emits('changeRefreshtime')
}
</script>

<style lang="scss" scoped>
.order-search {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.el-dropdown-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.dropdown-text {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #000;
}
</style>

<style>
.order-search .el-select__wrapper {
  min-height: 28px;
  border-radius: 0;
}

.refreshtime_dropdown {
  width: 128px;
}
.refreshtime_dropdown .activedropdown {
  background-color: rgba(20, 198, 193, 0.1);
  color: var(--pcmain-color);
}
</style>
